<template>
	<view class="record page">
		<view class="filter">
			<view class="type-filter" @click="showTypeFilter">
				<text class="txt" v-if="typeOptions[type]">{{typeOptions[type]}}</text>
				<text class="txt" v-else >全部类型交易</text>
				<text class="iconfont icondown"></text>
			</view>
			<view class="date-filter">
				<view class="date">
					<text class="txt">{{filterDateStr}}</text>
					<text class="iconfont icondown"></text>
				</view>
				<view class="desc">
					<text class="txt">支出 ¥{{total.dec}} 收入 ¥{{total.add}}</text>
					<text class="mon">月账单</text>
				</view>
			</view>
		</view>
		<view class="items">
				<scroll-view @scrolltolower="scrollDown" enable-flex="true" style="height: 100%;" class="scroll" scroll-y="true">
			<view @click="showInfo(item)" class="item" v-for="(item,index) in recordVos" :key="index">
				<image :src="avatar(item)" class="avatar"></image>
				<view class="info" >
					<text class="txt">{{info(item)}}</text>
					<text class="time">{{time(item)}}</text>
				</view>
				<view class="price add">{{amount(item)}}</view>
			</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import {record,getRecordOptions} from '@/api/user.js'
	import {showInfo} from '@/toast/index.js'
	import {getUserInfo} from '@/storage/index.js'
	import {parseTime} from '@/util/time.js'
	export default {
		onShow() {
			this.getList()
			getRecordOptions().then(res=>{
				this.typeOptions= res.data.typeOptions
				this.statusOptions = res.data.statusOptions
				this.busOptions = res.data.busOptions
			})
		},
		methods:{
			showTypeFilter(){
				wx.showActionSheet({
					itemList:this.typeOptions.concat(['全部交易类型']),
					success:(res)=>{
						if(res.tapIndex>=this.typeOptions.length){
							this.type  = null
						}else{
							this.type = res.tapIndex
						}
						this.recordVos = []
						this.getList()
					}
				})
			},
			scrollDown(){
				record(this.type,this.date).then(res=>{
						if(res.data.length>0){
							this.recordVos = this.recordVos.concat(res.data)
							this.idx++
							this.temVos = res.data
					}
				})
			},
			getList(){
				let date = parseTime(new Date(),'{y}-{m}')
				record(this.type,date).then(res=>{
					this.recordVos = res.data
					this.temVos  = this.recordVos
				})
			},
			showInfo(vo){
				showInfo(vo.record.info)
			},
			avatar(vo){
				if(vo.fromUser.id == this.userId){
					return vo.toUser.avatar
				}else{
					return vo.fromUser.avatar
				}
			
			},
			time(vo){
				return	parseTime(vo.record.time,'{m}月{d}日 {h}:{i}')
			},
			info(vo){
				if(vo.fromUser.id == this.userId){
					return this.typeOptions[vo.record.type]+"转给-"+vo.toUser.name
				}else{
					return this.typeOptions[vo.record.type]+"来自-"+vo.fromUser.name
				}
				
			},
			amount(vo){
				if(vo.fromUser.id == this.userId){
					return "-"+vo.record.amount
				}else{
					return "+"+vo.record.amount
				}
			}
		},
		computed:{
			date(){
				let date = new Date(this.filterDate.valueOf())
				date =  date.setMonth(date.getMonth()-1)
				date  = new Date(date)
				return parseTime(date,'{y}-{m}')
			},
			total(){
				let add =0;
				let dec = 0;
				this.temVos.forEach(vo=>{
					if(vo.fromUser.id == this.userId){
						dec += vo.record.amount
					}else{
						add += vo.record.amount
					}
				})
				return {add,dec}
			},
			userId(){
				return	getUserInfo().id
			},
			filterDateStr(){
				
				return parseTime(this.filterDate,'{y}年{m}月')
			},
			filterDate(){
				let today = new Date()
				today =  today.setMonth(today.getMonth()-this.idx)
				today  = new Date(today)
				return today
			}
		},
		data() {
			return {
				idx:0,
				type:null,
				recordVos:[],
				typeOptions:[],
				statusOptions:[],
				busOptions:[],
				temVos:[]
			};
		}
	}
</script>

<style lang="stylus" scoped>
	.record
		background url(../../static/hbg.png) no-repeat
		background-size 100% 150upx
		background-color #EFEFEF
		display flex
		flex-direction column
		padding 0upx 20upx
		display flex
		flex-direction column
		.filter
			.type-filter
				display flex
				align-items center
				justify-content center
				height 90upx
				.txt
					font-size 24upx
					color #4D3D07
				.iconfont
					width 15upx
					color #A1A1A1
					margin-left 5upx
			.date-filter
				background-color white
				height 130upx
				display flex
				flex-direction column
				padding 0 20upx
				justify-content center
				.date
					flex-direction column
					justify-content center
					margin-bottom 10upx
					.txt
						color #4D3D07
						font-size 28upx
					.iconfont
						width 15upx
						color #4E3D07
						margin-left 5upx
				.desc
					width 100%
					display flex
					justify-content space-between
					.txt
						color #6F6F6F
						font-size 22upx
					.mon
						color #6F6F6F
						font-size 22upx
		.items
			overflow hidden
			margin-top 10upx
			flex 1
			.item
				height 132upx
				padding 0 31upx
				display flex
				align-items center
				background-color white
				border-bottom 1px solid #DBDBDB
				.avatar
					width 72upx
					height 72upx
					border-radius 50%
					margin-right 19upx
				.info
					display flex
					flex-direction column
					justify-content center
					flex 1
					.txt
						color #4D3D07
						font-size 26upx
					.time
						color #A1A1A1
						font-size 22upx
						margin-top 20upx
				.price
					font-size 28upx
					display flex
					align-items center
					&.add
						color #F7895D
					&.dec
						color #4D3D07
</style>
